<template>
    <view class="pages">
        <!-- <view class="header">
			<view class="header-left">
				<view class="icon" @tap="back"></view>
				<view class="header-desc">创建店铺</view>
			</view>
            
		</view> -->
		<!-- <view v-if="!shop.shopId" style="font-size: 24rpx;color: rgb(255,55,71);text-align:right;">如需购买卡密，请联系客服</view> -->
        <view class="shop">
                <view class="form">
						<view class="avatar" v-if="!shopId">
							<text style="font-size: 32rpx;font-weight: 400;">卡密</text>
							<input style="text-align: right;font-size: 28rpx;" v-model="formData.kaMi" type="text" maxlength=36 placeholder="请输入卡密">
						</view>
						<view class="avatar" v-else>
							<text style="font-size: 32rpx;font-weight: 400;">卡密</text>
							<text style="font-size: 28rpx;">{{ shop.ka.kaMi }}</text>
						</view>
						<view class="avatar">
							<text style="font-size: 32rpx;font-weight: 400;">头像</text>
							<view style="display: flex;align-items: center;">
								<image
								class="image"
								@click="selectImg"
								:src="avatar?avatar:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'"
							>
							<view v-if="!avatar" class="acquiesce">默认</view>
							</image>
							<image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png" mode="" />
							</view>
							
						</view>
						<view class="avatar" style="height: 45rpx;">
							<text style="font-size: 32rpx;font-weight: 400;">店铺名称</text>
							<input style="text-align: right;" v-model="formData.shopName" type="text" maxlength=16 placeholder="请输入店铺名称">
						</view>
						<view class="avatar" style="height: 60rpx;">
							<text style="font-size: 32rpx;font-weight: 400;">行业</text>
							<view style="display: flex;align-items: center;">
								<text 
								@click="gotoProfession()" 
								style="position: relative; font-size: 28rpx; color: rgba(144,147,153,1);"
								>{{shopCate?shopCate:'请选择行业'}} </text>
								<image v-if="!shopCate" class="fanhui" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png" />	
							</view>
						</view>
						<view class="avatar" style="height: 45rpx;">
							<text style="font-size: 32rpx;font-weight: 400;">地区</text>
							<view style="display: flex;align-items: center;">
								<text 
								style="position: relative; font-size: 28rpx; color: rgba(144,147,153,1);text-align: right;"
								@click="gotoMap()"
								>{{mapName?mapName:'请选择地区'}}</text>
								<image v-if="!mapName" class="fanhui" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png" />
							</view>
						</view>
						<view v-if="!shop.shopId" style="font-size: 28rpx;color: rgb(69,70,74);margin-top: 28rpx;padding-left: 30rpx;">
							如需购买卡密，<text style="color: rgb(255,55,71);">请联系客服</text></view>
		
                </view>
				
				<view style="position: fixed;bottom: 72rpx;width: 100%;">
					<checkbox-group @change="checkedBox" style="margin-top: 90rpx;" v-if="!shopId">
		    			<label style="font-size: 24rpx;display: flex;align-items: center;margin: 0 0 24rpx 30rpx;">
		    				<checkbox color="rgba(142,84,244,1)" style="transform:scale(0.75)" value="cb"/><text style="color: rgba(144,147,153,1);">我已阅读并同意 <text style="color: rgba(142,84,244); display: inline-block;" @click="gotoAgreeMent">《用户服务协议》</text><text style="color: rgba(142,84,244);" @click="gotoprivacy()">《隐私协议》</text></text>
		    			</label>
		    		</checkbox-group>
					<button class="bottom-btn" @click="submitForm()">{{shop.shopId?'保存':'确认创建'}}</button>	
				</view>
            </view>
    </view>
	<uni-popup ref="popupCenter">
		<view class="centerPopup">
			<image @click="closePopup" class="image" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"/>
			<text class="tishi">如需开通店铺,请联系客服!</text>
			<button class="lianxi" @click="goService">联系客服</button>
		</view>
	</uni-popup>
</template>

<script>
import { httpRequest } from '../../utils/http'
export default {
    data() {
        return {
            formData:{
                shopName:'',
				shopPhone:uni.getStorageSync('business').phone,
				shopCate1Id:'',
				shopCate2Id:'',
				province:uni.getStorageSync('map').province,
				urbanarea:uni.getStorageSync('map').city,
				shopAddress:uni.getStorageSync('map').poi_name,
				shopImg:'',
				poiId:uni.getStorageSync('map').poi_id,
				kaMi:''

            },
			shopStore:{},
			tempFilePaths:{},
			shopCateStr:'',
            isShow:true,
            value:'',
            location:'',
			shop:{},
			shopCate:'',
			avatar:'',
			shopp:[],
			mapName:'',
			checked:'',
			shopId:0
        };
    },

    onLoad(e) {
		uni.removeStorageSync('map')
		uni.removeStorageSync('shoCate')
	// 	if(!uni.getStorageSync('token')){
	// 	uni.navigateTo({ url: '/pages/login/login' })
	// 	return
	// }
		console.log(e);
		if(e.shop){
			this.shop = uni.getStorageSync('shop').filter(item => item.shopId == e.shop)[0]
			console.log(this.shop);
			this.shopId =this.shop.shopId
			console.log(this.shop);
			console.log(this.shop.shopName);
			this.avatar = this.shop.shopImgPath
			this.formData.shopName = this.shop.shopName
			this.shopCate = this.shop.shopCate1Obj.shopCate1Name +'-'+ this.shop.shopCate2Obj.shopCate2Name
			this.formData.shopAddress = this.shop.shopAddress
			this.mapName = this.shop.shopAddress
		}
		if(e.map){
		this.formData.poiName = e.map
		}
		// uni.getLocation({
		// 	type: 'gcj02',
		// 	success: ({ longitude, latitude }) => {
		// 		this.location = `${longitude},${latitude}`
		// 				this.getMap()
		// 	},
		// })
},
	onShow() {
		if(uni.getStorageSync('shoCate')){
			this.shopCate=uni.getStorageSync('shoCate').name
			this.formData.shopCate1Id=uni.getStorageSync('shoCate').shopCate1Id
			this.formData.shopCate2Id=uni.getStorageSync('shoCate').shopCate2Id
		}
		console.log(uni.getStorageSync('map'));
		
		if(uni.getStorageSync('map')){
			this.formData.poiId = uni.getStorageSync('map').id
			this.formData.shopAddress = uni.getStorageSync('map').name
			this.formData.province = uni.getStorageSync('map').pname
			this.formData.urbanarea = uni.getStorageSync('map').cityname
			this.getMapName()
		}
	},
	onUnload() {
		console.log('页面卸载');
		uni.removeStorageSync('shoCate')
		uni.removeStorageSync('map')
	},
    methods: {
		checkedBox(e){
			if(e.detail.value.length){
				this.checked = e.detail.value[0]
			}else{
				this.checked = ''
			}
        
		console.log(this.checked);
      },
	  //隐私协议
	gotoprivacy(){
		uni.navigateTo({ url: '/pageC/index/privacy' })
	},
	//用户协议
	gotoAgreeMent(){
		uni.navigateTo({ url: '/pageC/index/agreement' })
	},
		goService(){
			uni.navigateTo({ url: '/pageB/index/service' })
		},
		closePopup(){
			this.$refs.popupCenter.close()
		},
		getMapName(){
			const poi = uni.getStorageSync('map')
			this.mapName = `${poi.pname}-${poi.cityname}-${poi.adname}\nPOI:${poi.name}`
		},
		gotoProfession(){			
			if(this.shopCate&&this.shopId) return uni.showToast({title:'不可以修改行业哦~',icon:'none'})
			uni.navigateTo({ url: '/pageB/index/Profession' })
		},
		gotoMap(){
			
			if(this.mapName&&this.shopId) return uni.showToast({title:'不可以修改地址哦~',icon:'none'})
			uni.navigateTo({ url: '/pageB/index/Map' })
		},
		//上传LOGO
		selectLogo(res){
			this.formData.shopImg = res.tempFiles[0]
			const path = res.tempFiles[0].path
			uni.getFileSystemManager().readFile({
        filePath: path,
        encoding: 'base64',
        success: (data) => {
          // 图片已经转换为Base64编码，可以在data.data中访问
          console.log('Base64编码:', data.data);
			this.formData.shopImg = data.data
        },
        fail: (error) => {
          console.error('读取文件失败', error);
        }
      });
		},
		selectImg(){
			uni.chooseImage({
  					success: (res) => {
					console.log(res);
		 			this.tempFilePaths = res.tempFiles[0]
		 			console.log(this.tempFilePaths);
					this.selectLogo(res)
					 this.avatar = res.tempFilePaths[0]
		//  uni.uploadFile({
		// 	url:'https:192.168.1.102:4355/api/AddShopImg',
		// 	fileType: 'image',
		// 	filePath: this.tempFilePaths.path,
		// 	name: 'file',
		// 	header:{
		// 		'Content-Type': 'multipart/form-data',
    	// 	    'token': `${uni.getStorageSync('token')}`
		// 	},
		// 	success: (res) => {
		// 		console.log(res);
		// 	},
		// 	fail: (error) => {
		// 		console.log(error);
		// 	}
		//  })
		
},		
	})
		},
		//返回上一页
		back(){
			uni.switchTab({url: '/pages/index/index'})
		},
		//拆分类型ID
		onchange(){
			this.formData.shopCate1Id = this.shopCateStr.split('-')[0]
			this.formData.shopCate2Id = this.shopCateStr.split('-')[1]
		},
		// async getMap(){
		// 	const apiKey = '020d75b8d85b7d712b77a65cf9256d2a';
        // const res = await uni.request({
        //   url: `https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${this.location}`,
        //   method: 'GET'
        // });
		// console.log(res);
		// this.formData.shopAddress = res.data.regeocode.formatted_address
		// this.formData.province = res.data.regeocode.addressComponent.province
		// this.formData.urbanarea = res.data.regeocode.addressComponent.city
		// },

      //确认按钮点击事件
     async submitForm(){
		console.log(this.shop);
		
        //表单校验
		// if(this.formData.shopImg=='') this.formData.shopImg=''
		
		if(this.shop.shopId){
			if(this.formData.shopName.trim()=='')return uni.showToast({title:'店铺名不能为空',icon:'error'})
			//修改
			const res = await httpRequest('/api/editShop','POST',{
				shopId:this.shop.shopId,
				shopImg:this.formData.shopImg?this.formData.shopImg:'',
				shopName:this.formData.shopName,
				businessId:uni.getStorageSync('business').businessId,
				shopPhone:''
			})
			console.log(res);
			if(res.code==0){
				// if(this.shop.ka)return uni.showToast({
				// 	title: '您的店铺已经激活了~',
				// 	icon: 'none'
				// })
				if(this.formData.kaMi.trim()){
					const res = httpRequest('/api/shopKaJianUseNum','POST',{
						shopId:this.shop.shopId,
						kaMi:this.formData.kaMi
					})
					console.log(res);
					return uni.showToast({title:'续费成功',icon:'none'})
				}
				uni.showToast({title:'修改成功',icon:'none'})
				uni.reLaunch({ url: '/pages/index/index' })
			}else{
				uni.showToast({
				title: res.message,
				icon: 'none'
			})
			}

		}else{
			//新增
			if(!this.checked)return uni.showToast({title:'请先勾选协议',icon:'none'})
			if(this.formData.shopName.trim()=='')return uni.showToast({title:'店铺名不能为空',icon:'error'})
			if(!this.formData.poiId) return uni.showToast({title:'请选择地址',icon:'none'})
			if(!this.shopCate) return uni.showToast({title:'请选择行业',icon:'none'})
			uni.showLoading({
				title: '创建中',
				mask: false
			})
			const res = await httpRequest('/api/AddShopInfo','POST',this.formData)
			console.log(res);
			if(res.code == 0){
				uni.hideLoading()
				uni.showToast({title:'添加成功',icon:'success'})
				uni.setStorageSync('shop',res.data)
				uni.setStorageSync('shopText', res.data[res.data.length-1].shopName)
				uni.setStorageSync('index', res.data.length-1)
				this.remove()
				setTimeout(() => {
					uni.switchTab({ url: '/pages/index/index' })
				}, 1000);
				uni.removeStorageSync('map')
				uni.removeStorageSync('shosCate')
			}else{
				uni.hideLoading()
				uni.showToast({
				title: res.message,
				icon: 'none'
			})
			this.$refs.popupCenter.open('center')
			}
		}
				
	},
	async remove(){
		uni.showLoading({
        title: '请稍后',
        mask: false
      })
        await httpRequest('/api/delStaging','POST',{
        businessId: uni.getStorageSync("business").businessId,
        })
        await httpRequest('/api/delTask','POST',{
          taskId:uni.getStorageSync('taskId')
        })
        uni.hideLoading()
        uni.removeStorageSync('copy')
        uni.removeStorageSync('maxNum')
        uni.removeStorageSync('time')
        uni.removeStorageSync('v1')
        uni.removeStorageSync('v2')
        uni.removeStorageSync('v3')
        uni.removeStorageSync('v4')
        uni.removeStorageSync('v5')
        uni.removeStorageSync('v6')
        uni.removeStorageSync('v7')
        uni.removeStorageSync('videoArr')
        uni.removeStorageSync('product')
        uni.removeStorageSync('taskId')
        uni.removeStorageSync('percent')
        uni.removeStorageSync('isSlice')
        uni.removeStorageSync('color')
        uni.removeStorageSync('font')
        uni.removeStorageSync('same')
        uni.removeStorageSync('sameTitle')
        uni.removeStorageSync('voiceArr')
        uni.removeStorageSync('isItem')
        uni.removeStorageSync('templateId')
        uni.removeStorageSync('isSwitch ')
	},
	}
}
</script>

<style lang="scss" scoped>
.pages{
		width: 100%;
		min-height: 100vh;
		background-color: #F1F2F4;
		overflow: hidden;
		overflow-y: scroll;
		.header{
			width: 100%;
			height: 180rpx;
			background-color: #fff;
			overflow: hidden;
			.header-left{
				width: 500rpx;
				height: 170rpx;
				margin-left: 16rpx;
				display: flex;
				align-items: center;
				margin: 60rpx 68rpx 16rpx 24rpx;
				.icon{
					// border: 3rpx solid #101010;
					transform: rotate(-45deg);
					width: 24rpx;
					height: 24rpx;
					
				}
				.header-desc{
					margin-left: 12rpx;
					color: #303030;
					font-size: 32rpx;
				}
			}
			
		}
        .shop{
            width: 100%;
    		height: 100%;
    		margin: 18rpx 15 rpx 15 rpx 28rpx;
    		position: absolute;
    		background-color: #fff;
            .shoptext{
                font-size: 38rpx;
                color: #303030;
                font-weight: 800;
            }
            .form{
				background-color: #fff;
				.avatar{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					padding: 32rpx;
					font-size: 28rpx;
					.image{
						position: relative;
						width: 80rpx;
						height: 80rpx;
						.acquiesce{
							display: flex;
    						justify-content: center;
    						align-items: flex-end;
							position: absolute;
							bottom: 0;
							left: 0;
							width: 80rpx;
							height: 46rpx;
							font-size: 22rpx;
							color: #fff;
							background: linear-gradient(180deg,rgba(25,0,46,0) 0%,rgba(25,0,46,0.61) 100%);
							text-align: center;
							border-radius: 8rpx;
						}
					}
					.fanhui{
						position: relative;
						top: 0;
						right: 0;
						width: 48rpx;
						height: 48rpx;

					}
				}
            }
			.douyin{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 134rpx;
				padding: 12rpx,16rpx;
				margin-top: 16rpx;
				background-color: #fff;
				padding: 32rpx;
				.douyin-text{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: rgba(144,147,153,1);
				}
				.btntop{
        			display: flex;
        			align-items: center;
        			justify-content: center;
        			width: 686rpx;
        			height: 64rpx;
        			background-color: rgb(23,11,26);
        			line-height: 64rpx;
        			font-size: 28rpx;
        			color: #fff;
        			border-radius: 272rpx;
					margin-top: 32rpx;
    }
			}
			.bottom-btn{
				width: 690rpx;
				height: 88rpx;
				background-color: rgba(142,84,244,1);
				color: #fff;
				font-size: 32rpx;
			}
        }
    }
	.centerPopup{
	width: 630rpx;
	height: 312rpx;
	background-color: #fff;
	text-align: center;
	font-size: 32rpx;
	padding: 24rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
	.image{
		display: block;
		width: 48rpx;
		height: 48rpx;
		margin-left: auto;
		margin-bottom: 34rpx;
	}
	.tishi{
		color: rgb(69,70,74);
		margin: 34rpx 0 30rpx 0;
	}
	.lianxi{
		width: 240rpx;
		height: 80rpx;
		border-radius: 310rpx;
		background-color: rgb(142,84,244);
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		margin-top: 30rpx;

	}
}
</style>